import { init, h } from 'snabbdom'

import classModule from 'snabbdom/modules/class'
import style from 'snabbdom/modules/style'
import props from 'snabbdom/modules/props'
import eventListeners from 'snabbdom/modules/eventListeners'

const container = document.querySelector('#container')

const patch = init([
    classModule,
    style,
    props,
    eventListeners
])

// 初始化页面原始数据
let data = new Array(10).fill(0).map((item,index) => ({
    index,
    content: getStr(),
    time: getDate()
}));
  
// 保存 vnode
let vnode = initVnode(data);

// 首次渲染
patch(container, vnode);

// 获取当前时间
function getDate () {
    let date = new Date()
    let format = 'yyyy-MM-dd hh:mm:ss'
    var o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds(),
        "q+": Math.floor((date.getMonth() + 3) / 3),
        "S": date.getMilliseconds()
    };
    if (/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(format)) {
            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
        }
    }
    return format;
}

// 初始化页面vnode
function initVnode (data) {
    return h('div.wrap', {
        style: {
            width: '600px',
            margin: '50px auto',
            padding: '20px',
            border: '1px solid #000'
        }
    }, [
        h('header.header-wrap',  [
            h('button.btn', { on: { click: [changeSort, 'order'] } }, '顺序排列'),
            h('button.btn', { on: { click: [changeSort, 'reorder'] } }, '倒序排列'),
            h('button.btn', { on: { click: [changeSort, 'random'] } }, '随机排列'),
            h('button.btn', { on: { click: addItem } }, '添加1项')
        ]),
        h('table', [
            h('thead', [
                h('th', '序号'),
                h('th', '内容'),
                h('th', '添加时间')
            ]),
            h('tbody', data.map(getTrVnode))
        ])
    ]);
}

// 获取表格行的 vnode
function getTrVnode(item) {
    return h('tr', [
        h('td', item.index),
        h('td', item.content),
        h('td', item.time)
    ])
}

// 点击按钮，改变排序
function changeSort (type) {  
    if (type === 'order') {
        data.sort((a, b) => a.index - b.index);
    } else if (type === 'reorder') {
        data.sort((a, b) => b.index - a.index);
    } else if (type === 'random') {
        data.sort(() => Math.random() > 0.5 ? -1 : 1)
    }
    renderPage(data);
}

// 添加一项
function addItem () {
    const total = data.length;
    const item = {
        index: total,
        content: getStr(),
        time: getDate()
    };
    data.push(item);
    renderPage(data);
}

// 重新渲染页面
function renderPage (data) {
    vnode = patch(vnode, initVnode(data))
}

// 辅助函数，获取随机字符串
function getStr() {
    var sourceStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var maxPos = sourceStr.length;
    var str = '';
    for (let i = 0; i < 10; i++) {
        str += sourceStr.charAt(Math.floor(Math.random() * maxPos));
    }
    return str;
}